<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="" content="">
  <!-- 兼容性视图 -->
  <meta http-equiv="" content="">
  <meta content="" name="description">
  <title>js实现搜索框</title>
  <style>
	*{
		margin:0;
		paading:0;
	}
	
    body {
      height: 100%;
	  width:100%;
    }


    #mid{
		width:100%;
		height:235px;
		pisition:relative;
	}
	
	.mid{
	    width:50%; 
		height:150px;
		margin:auto;
		line-height:150px;
		margin-top:100px; 
		text-align:center;   
		float:center;
    }

    .input {
      width: auto;
      height: 55px;
      position: relative;
	  text-align:center;
    }

    .text {
      border: 1px solid #b6b6b6;
      width: 495px;
      background: #fff;
      height: 33px;
      line-height: 33px;
      font-size: 18px;
      padding: 3px 0 0 7px;
    }

    #btn {
      width: 90px;
      height: 38px;
	  line-height:38px;
      color: #fff;
      font-size: 16px;
      letter-spacing: 3px;
      background: #3385ff;
      border: .5px solid #2d78f4;
      margin-left: -5px;
      vertical-align: top;
      opacity: 0.9;
    }

    #btn a:hover {
      opacity: 1;
      box-shadow: 0 1px 1px #3385ff;
      cursor: pointer;
	  line-height:38px;
	  text-decoration:none;
    }
    
	#btn a{
		text-decoration:none;
	}
		
	#gjz {
		width: 501px;
		border: 1px solid #3385ff;
		position: relative;
		list-style:none;
		margin-left:423px;
		height:auto;
	}


	#gjz ul li {
		list-style:none;
		text-align:left;
		margin-left:-40px;
		height:30px;
	}


	#gjz ul li:hover {
		background-color: #3385ff;
	}
	
	#zj{
		width:1000px;
		height:auto;
		margin-left:300px;
	}
	
	.zj{
		width:800px;;
		height:40px;
		background:gray;
	}
	
	.zj ul li{
		list-style:none;
		float:left;
		width:100px;
		height:40px;
		line-height:40px;
	}
	.zj ul li a{
		text-decoration:none;
		text-align:center;
	}
	.zj ul li:hover{
		background:#E0E0E0;
	}
	
	
	
	#sy{
		float:left;
		height:40px;
		width:130px;
		text-align:center;
        line-height:40px;
		font-weight:bold;
		background:#E0E0E0;
		color:white;
		font-size:14px;
	}
	#tj,#dh{
		height:40px;
		width:130px;
		margin:0;
		text-align:center;
        line-height:40px;
		font-weight:bold;
		color:white;
		font-size:14px;
	}
	
	.zj li:hover{
		cursor:pointer;
		background:#E0E0E0;
	}
	
	.content{
		width:800px;
		height:auto;
	}
	.sy-content1{
		padding-left:40px;
		width:720px;
		height:40px;
		font-weight:bold;
		margin:10px auto;
		line-height:40px;
	}
	
	#nr{
		width:720px;
		height:auto;
		line-height:50px;
		padding-left:20px;
		color:blue;
	}
	
	.nr{
		margin-left:20px;
		height:80px;
	}
	.sy-content2{
		padding-left:40px;
		width:720px;
		height:40px;
		font-weight:bold;
		margin:10px auto;
		line-height:40px;
	}
	
	
	#left{
		width:460px;
		height:auto;
	}
	
	
	.tj-content1{
		padding-top:20px;
		width:450px;
		height:30px;
		font-size:18px;
		
	}
	
	.tj-content1 a{
		text-decoration:none;
		color:black;
	}
	
	.tj-content1 a:hover{
		text-decoration:underline;
		color:bule;
	}
	
	.left1{
		width:220px;
		height:auto;
	}
	
	#img1{
		width:218px;
		height:auto;
		margin-top:10px;
	}
	
	.right1{
		width:240px;
		padding-left:230px;
		margin-top:-215px;
	}
	
	#img2{
		width:218px;
		height:146px;
	}
	
	#left a{
		text-decoration:none;
		color:balck;
	}
	
	#right{
		width:250px;
		height:auto;
		margin-left:445px;
		margin-top:-275px;
		font-size:16px;
	}
	
	#div1{
		height:20px;
		width:400px;
		margin-top:10px;
		padding-top:10px;
	}
	
	#div2{
		height:25px;
		width:400px;
		margin-top:10px;
	}
	
	#div2 ul li{
		float:left;
		width:200px;
		height:25px;
		line-height:25px;
		list-style:none;
	}
	
	#div3 ul li{
		float:left;
		width:200px;
		height:25px;
		line-height:25px;
		
		list-style:none;
	}
	#div4 ul li{
		float:left;
		width:200px;
		height:25px;
		line-height:25px;
		
		list-style:none;
	}
	#div5 ul li{
		float:left;
		width:200px;
		height:25px;
		line-height:25px;
		
		list-style:none;
	}
	
	#dh-content{
		width:800px;
		height:auto;
	}
	
	.dh-content{
		width:800px;
		height:80px;
		margin-top:10px;
	}
	.dh-content ul li{
		float:left;
		width:130px;
		height:80px;
		font-size:14px;
		list-style:none;
	}
	
	</style>
</head>

<body>
  <div id="mid">
  <!--图片-->
    <div class="mid" >
        <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank">
          <img  height=130 width=270 src="bd_logo1.png" title="百度一下你就知道"/>
        </a>  
    </div>
<!--输入框-->
    <div class="input" id="input">
       <input type="text" id="text" class="text"  autofocus placeholder="请输入关键字"><a href="#"></a>
	   <button type="button" id="btn"><a href="http://home.baidu.com/"> 百度一下</a></button>
    </div>	
 </div>
 
 <div id="zj">
	<div class="zj" id="centerNav">
		<ul>
			<li id="sy" class="center">我的关注</li>
			<li id="tj" class="center"><a href="#">推荐</a></li>
			<li id="dh" class="center"><a href="#">导航</a></li>
		</ul>
	</div>
	<div class="content" >
		<div class="sy-content1">&nbsp;&nbsp;我的导航</div>
		  <p id="nr">焦点新闻</p>
			<ul class="nr">
				<li style="height:30px;"><h5>焦点新闻</h5></li>
				<li style="height:30px;"><h5>焦点新闻</h5></li>
				<li style="height:30px;"><h5>焦点新闻</h5></li>
			</ul>
		
		  <p id="nr">生活消费</p>
			<ul class="nr">
				<li><h5>生活消费</h5></li>
				<li><h5>生活消费</h5></li>
				<li><h5>生活消费</h5></li>
			</ul>
		<div class="sy-content2"><i class="fa fa-sort-desc" style="color:#3a3a3a;font-size:20px"></i>&nbsp&nbsp自定义</div>
	</div>
	<div class="content" style="display:none">
		<div id="left">
			<p class="tj-content1"><a href="https://www.baidu.com">
				统计局：前四个月房地产投资保持平稳 后续有支撑</a></p>
			<div class="left1">
			 <a href="#"> 
			 <img src="u=2121802652,3523043489&fm=173&app=49&f=JPEG.jpg" id="img1" ></a>
			<p id="right1"><a href="https://mbd.baidu.com/">
				英特尔再现安全漏洞：2011年后计算机几乎全中枪，可窃取密码数据</a></p></div>
			<div class="right1" ><a href="#">
				<img src="u=3096113355,3796488913&fm=173&app=49&f=JPEG.jpg" id="img2" ></a>
			<p id="right1"><a href="https://mbd.baidu.com/">
			   英特尔再现安全漏洞：2011年后计算机几乎全中枪，可窃取密码数据</a></p></div>
		</div>
		
		<div id="right">
			<div id="div1">
                     <ul>
                         <h4>实时热点</h4>
                     </ul>
					</div>
					
					<div id="div2">
					 <ul>
                         <li>张云雷演出被叫停</li>
                         <li>勇士1-10开拓者</li>
                     </ul>
					</div>
					
					<div id="div3">
					 <ul>
                         <li>艾美奖获奖</li>
                         <li>中国男篮VS约旦</li>
                     </ul>
					</div>
					<div id="div4">
					 <ul>
                         <li>艾美奖获奖</li>
                         <li>中国男篮VS约旦</li>
                     </ul>
					</div>
					<div id="div5">
					 <ul>
                         <li>艾美奖获奖</li>
                         <li>中国男篮VS约旦</li>
                     </ul>
					</div>
					 
		
		</div>
	</div>	
	
	<div class="content" style="display:none;">
		<div id="dh-content">
			<div class="dh-content">
				<ul>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				</ul>
			</div>
			
			<div class="dh-content">
				<ul>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				</ul>
			</div>
			
			<div class="dh-content">
				<ul>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				</ul>
			</div>
			
			<div class="dh-content">
				<ul>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				</ul>
			</div>
		</div>
	</div>
 </div>
 

  <!--用js实现关键字匹配-->
  <script>
	var input = document.getElementById("input");
    var text = document.getElementById("text");
    var fruits = ["apple", "pear", "你好", "我是", "window", "大家好","1238", "是","世界","个性设置","beach","百度首页"];
    text.onkeyup = function () {
        var val = this.value;
        var filterArr = [];
        for (var i = 0; i < fruits.length; i++) {
            var fruit = fruits[i];
            if (fruit.indexOf(val) > -1) {
                filterArr.push(fruit);
            }
        }
		
        var xz = document.getElementById("gjz");
        if (xz) {
            input.removeChild(xz);
        }
        if (filterArr.length == 0 | val == "") {
            return false;
        }
        
        var adddiv = document.createElement("div");
        adddiv.id = "gjz";
        input.appendChild(adddiv);
        var ul = document.createElement("ul");
        adddiv.appendChild(ul);
        for (var i = 0; i < filterArr.length; i++) {
            var li = document.createElement("li");
            ul.appendChild(li);
            li.innerText = filterArr[i];
        }
	}
	
  </script>
  
  <!--用js实现导航之间的转换-->
  <script>
    var centerNav = document.getElementById("centerNav")
 	var centers = document.getElementsByClassName("center");
 	var contents = document.getElementsByClassName("content");
 	for(var i=0;i<centers.length;i++){
 		centers[i].onclick = function(centerNav)
		 {
 			return function(){
 			  for(var j=0;j<centers.length;j++){
 				 if(j == centerNav){		    
 					contents[j].style.display = "block";						
 				 }else{
 					contents[j].style.display = "none";
 				 }
 			  }
 			};
 		}(i);
 	 }	
  </script>
  
</body>

</html>